<template>
  <Container>
    <div class="bg-white">
      <div class="container-title">基础信息</div>
      <Form :label-width="120" :rules="rule" ref="defalutForm" :model="form">
        <Row class="pr">
          <Col span="12">
            <FormItem label="公司: " prop="company_name">
              <Input
                placeholder="公司名称"
                v-model="form.company_name"
                :maxlength="60"
              />
            </FormItem>
          </Col>
        </Row>
        <Row class="pr">
          <Col span="12">
            <FormItem label="地址: " prop="address">
              <Input
                placeholder="地址"
                v-model="form.address"
                :maxlength="60"
              />
            </FormItem>
          </Col>
        </Row>
        <Row class="pr">
          <Col span="12">
            <FormItem label="备注: " prop="remark">
              <Input type="textarea" placeholder="备注" v-model="form.remark" />
            </FormItem>
          </Col>
        </Row>
        <Row class="pr">
          <Col span="12">
            <FormItem label="部门选择: " prop="department_id">
              <Select
                @on-change="getPosition"
                v-model="form.department_id"
                filterable
                clearable
                placeholder="请选择部门"
              >
                <Option
                  v-for="(item, index) in Depart"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                >
                </Option>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Row class="pr">
          <Col span="12">
            <FormItem label="职位: " prop="position_id">
              <Select
                v-model="form.position_id"
                filterable
                clearable
                placeholder="请选择职位"
              >
                <Option
                  v-for="(item, index) in Position"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                >
                </Option>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <!-- <Row class="pr">
          <Col span="12">
            <FormItem label="状态: " prop="type">
              <Select v-model="form.type" filterable clearable placeholder="请选择状态" >
                <Option
                  v-for="item in list"
                  :key="item.type"
                  :label="item.name"
                  :value="item.type">
                </Option>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Row class="pr">
          <Col span="12">
            <FormItem label="部门选择: " prop="department_id">
              <Select v-model="form.department_id" filterable clearable placeholder="请选择状态" >
                <Option
                  v-for="(item, index) in Depart"
                  :key="index"
                  :label="item.name"
                  :value="item.id">
                </Option>
              </Select>
            </FormItem>
          </Col>
        </Row> -->
      </Form>
    </div>
    <div class="container-footer bg-white" slot="footer">
      <Button size="large" class="ml" @click="jumpPrevPage">返回上一页</Button>
      <Button type="primary" size="large" class="ml" @click="onsave"
        >保存</Button
      >
    </div>
  </Container>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          type: "1",
          name: "设计师",
        },
        {
          type: "2",
          name: "制版",
        },
        {
          type: "3",
          name: "制样",
        },
      ],
      form: {
        company_name: "",
        address: "",
        remark: "",
        type: "",
        department_id: "",
        position_id: "",
      },
      Depart: [],
      Position: [],
      rule: {
        company_name: [
          { required: true, message: "请输入公司名称", trigger: "blur" },
        ],
        address: [{ required: true, message: "请输入地址", trigger: "blur" }],
        remark: [{ required: true, message: "请输入详情", trigger: "blur" }],
        type: [{ required: true, message: "请选择类型", trigger: "change" }],
        department_id: [
          { required: true, message: "请选择部门", trigger: "change" },
        ],
      },
    };
  },
  created() {
    this.getDepart();
  },
  methods: {
    jumpPrevPage() {
      this.$router.back();
    },
    getDepart() {
      this.$ajaxGet("/user/getDepartment").then((res) => {
        this.Depart = res.map((item) => {
          return {
            id: item.department_id.toString(),
            name: item.department_name,
          };
        });
      });
    },
    // 获取职位
    getPosition() {
      this.$ajaxGet(
        `/user/getPosition?department_id=${this.form.department_id}`
      ).then((res) => {
        this.Position = res.map((item) => {
          return {
            id: item.position_id.toString(),
            name: item.position_name,
          };
        });
      });
    },
    onsave() {
      this.$refs["defalutForm"].validate((valid) => {
        if (valid) {
          let department_name = this.Depart.find(
            (item) => item.id === this.form.department_id
          );
          this.form.department_name = department_name.name;
          this.$jsonPost("/company/createCompany", { ...this.form }).then((res) => {
              this.$Message.success("创建公司成功!");
              this.$router.replace({ name: "company/setType/index" });
              window.location.reload()
            }
          );
        }
      });
    },
  },
};
</script>